<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/bootstarp.min.css">
    <title>Vue组件</title>
</head>
<body>
 
  <div id="root">
    <h2>局部注册组件</h2>
    <abc></abc>
    <h2>可复用的组件</h2>
   <countable-btn></countable-btn>
   <h2>相同的组件之间的数据是互相独立的</h2>
   <countable-btn></countable-btn><countable-btn></countable-btn><countable-btn></countable-btn>
   <h2>带属性的组件实例</h2>
   <person-card name="张三" age="15" sex="男"></person-card>
   <person-card name="李四" age="18" sex="女"></person-card>
   <person-card name="王五" age="25" sex="男"></person-card>
   <h2>将数据传递给子组件</h2>
   <person-card v-for="p in list" :name="p.name" :age="p.age" :sex="p.sex"></person-card>
    <h2>插槽</h2>
   <card-view>你好</card-view>
  </div>  

  <div id="root2">
    <h1>{{title}}</h1>
    <h2>局部注册的组件在另一个vue实例中不可用</h2>
    <abc></abc>
    <h2>全局注册的组件在另一个vue实例也可用</h2>
    <countable-btn></countable-btn>
  </div>

<script>
     //局部注册
     const abc=Vue.extend({
      template:`
      <p>{{name}}</p>
      `,
      data:function(){
        return {
          name:'张三'
        }
      }
     })


   //一个简单的注册组件demo
   Vue.component('countable-btn',{
    //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
    data: function(){
        return {
            cnt:0
        }
    },
    template: ` <button @click="cnt++">你点击了{{cnt}}次</button>`
   })
   //通过prop向组件传递数据
   Vue.component('person-card',{
    props:['name','sex','age'],
    template:`
    <div style="border: 1px solid blue;width: 200px;display: inline-block">
     <h3>*名片</h3>   
    <ul>
        <li>姓名：{{name}}</li>
        <li>性别：{{age}}</li>
        <li>年龄：{{sex}}</li>
    </ul>
   </div>
    `
   })
   //插槽分发内容
   Vue.component('card-view',{
    props:['title'],
    data:function(){
      return {
        age:15 
      }
    },
    template:`<div>
      <h3>{{title}}</h3>
      <slot></slot>
      <p>{{age}}</p>
      </div>`
   })



  let app = new Vue({
    el:'#root',
    data:{
       list:[
         {name: '张三',age:18,sex: '男'}, 
         {name: '李四',age:29,sex: '女'}, 
         {name: '王五',age:35,sex: '女'}, 
         {name: '赵六',age:45,sex: '男'}
    ] 
    },
    components:{
      abc:abc
    }
   })

  let app2 = new Vue({
    el:'#root2',
    data:{
      title:'root2元素'

    }
  })
    

</script>    
</body>
</html>